<template>
  <page-form-row>
    <!-- 是否允许 -->
    <page-form-item :label="labelStrList[0]" size="1">
      <template #label="{ label }">
        <div class="font-bold">{{ label }}</div>
      </template>
      <a-radio-group v-model="form[configTypePropStr][propStrList[0]]" @change="returnFlagChangeFn">
        <a-radio v-for="item in dict[dictStrList[0]]" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
      </a-radio-group>
    </page-form-item>
    <template v-if="form[configTypePropStr][propStrList[0]] == 1">
      <!-- 是否收费 -->
      <page-form-item :label="labelStrList[1]" style="margin-bottom: 0" size="1">
        <template #label="{ label }">
          <div class="font-bold">{{ label }}</div>
        </template>
        <a-radio-group v-model="form[configTypePropStr][[propStrList[1]]]">
          <a-radio v-for="item in dict[dictStrList[1]]" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
        </a-radio-group>
      </page-form-item>
      <div class="page-form-block" v-if="form[configTypePropStr][[propStrList[1]]] == 1">
        <!-- 收费规则 -->
        <page-form-item label="收费规则" style="margin-bottom: 0" required class="charge-item">
          <span class="charge-item-text">{{ labelStrList[2] }}</span>
          <page-form-item
            :field="`${configTypePropStr}.${propStrList[2]}`"
            :rules="{ message: '请输入金额', required: true }"
            style="margin-bottom: 0"
          >
            <i-input-number v-model="form[configTypePropStr][propStrList[2]]" :style="{ width: '163px' }" />
          </page-form-item>
        </page-form-item>
      </div>
      <div style="height: 16px; width: 100%"></div>
      <!-- 门店归属 -->
      <page-form-item label="还车后，车辆归属取车门店或还车门店" labelTooltipContent="车辆归属选择还车门店时，系统会自动生成跨门店调车单">
        <template #label="{ label }">
          <div class="font-bold">{{ label }}</div>
        </template>
        <a-radio-group v-model="form[configTypePropStr][[propStrList[3]]]">
          <a-radio v-for="item in dict[dictStrList[2]]" :key="item.value" :value="item.value">{{ item.label }}</a-radio>
        </a-radio-group>
      </page-form-item>
    </template>
  </page-form-row>
</template>

<script setup name="MerchantStoreServiceConfigReturn">
  import { inject } from 'vue'
  defineProps({
    status: {
      type: String,
      default: 'add',
    },
    configTypePropStr: String,
    labelStrList: Array,
    propStrList: Array,
    dictStrList: Array,
  })
  const emit = defineEmits(['returnFlagChangeFn'])
  // 接收父组件
  const form = inject('form')
  const dict = inject('dict')

  const returnFlagChangeFn = (val) => {
    emit('returnFlagChange', val)
  }
</script>

<style lang="less" scoped>
  .page-form-block {
    background: rgba(247, 248, 250, 0.5);
    padding: 20px;
    width: 100%;
  }
  .charge-item {
    margin-bottom: 16px;
    .charge-item-text {
      line-height: 32px;
      margin-right: 5px;
    }
    :deep(.arco-form-item-content-flex) {
      align-items: flex-start;
    }
  }
</style>
